<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
	<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
		<title>块</title>
			<style type="text/css">
    #box{width: 600px;
    	margin: 0 auto;
        margin-top: 100px;
        border: 1px solid #f65;
        height: 400px;
    }
    .sbox{width: 100px;
    	  height: 100px;
    	  background-color:red;
    	  margin:0 auto;
    	  border: block solid 1px;

    }

	</style>
	</head>
	<body>
		<body>
<div id="box">
    <input type="button" onclick="changeWidth()" value="变宽">
    <input type="button" onclick="changeHeight()" value="变高">
    <input type="button" onclick="changeColor()" value="变色">
    <input type="button" onclick="yc() "value="隐藏">
    <input type="button" onclick="cz()"value="重置">
	
	<div class="sbox">
	</div>

</div>

</body>
	</body>
	</html>
<script >

    function changeWidth(){
	var Osbox = document.getElementsByClassName('sbox')
    Osbox[0].style.width = "200px"; 
	// console.log(Osbox);
}
   function changeHeight(){
   var Osbox = document.getElementsByClassName('sbox')
   // alert(888)
   Osbox[0].style.height = "200px"; 
 }
    function changeColor(){
    	
 	var Osbox = document.getElementsByClassName('sbox')
 	Osbox[0].style.backgroundColor = "black"
 }
    function yc(){
    var Osbox = document.getElementsByClassName('sbox')
 	Osbox[0].style.display = "none"	
    }
    function cz(){
    var Osbox = document.getElementsByClassName('sbox')
 	Osbox[0].style.cssText = ""	
    }
</script>




